<style>
    .postTopicButton {
        background-color: #fff;
        color: #666;
    }
    .postTopicButton:hover {
        background-color: #42a8fc;
        color: #fff;
    }

    #post-form-layout input {
        width: 90%;
        padding: 10px;
    }
</style>
<div id="post-form-layout" style="padding:20px;box-sizing: border-box">
    <img src="./images/color.png" style="width:20px;cursor:pointer;" onclick="selectTopicColor()">
    <input type="color" id="post-topic-color" style="display:none;" onchange="setTopicColor()">
    <input name="subject" placeholder="坦白说主题" style="font-size:20px;border:0px;"/>
    <textarea class="input_area" name="content" placeholder="坦白说内容"></textarea>
</div>
<script>
    var buf = new StringBuffer();
    var timestamp = (new Date()).getTime();
    buf.append('<button class="postTopicButton -box" onclick="pushTopic()"> 发 布 </button>');
    $("#other-ops-layout").html(buf.toString());
    var editorHeight = document.body.clientHeight - $(".topbar").outerHeight(true) - 110;
    tinymce.init({
        selector: '.input_area',
        language: 'zh_CN',
        height: editorHeight,
        plugins: 'powerpaste code paste print preview fullpage importcss ' +
            'searchreplace autolink autosave save directionality visualblocks ' +
            'visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor toc ' +
            'insertdatetime advlist lists wordcount ' +
            'imagetools textpattern noneditable help ' +
            'charmap quickbars emoticons',
        menubar: 'file edit view insert format tools table help',
        toolbar: 'code undo redo | bold italic underline strikethrough | fontselect fontsizeselect formatselect | alignleft aligncenter alignright alignjustify | outdent indent |  numlist bullist checklist | forecolor backcolor casechange permanentpen formatpainter removeformat | pagebreak | charmap emoticons | fullscreen  preview save print | insertfile image media pageembed template link anchor codesample | a11ycheck ltr rtl | showcomments addcomment',
        imagetools_toolbar: "rotateleft rotateright | flipv fliph | editimage imageoptions",
        autosave_ask_before_unload: true,
        autosave_prefix: "{path}{query}-{id}-",
        autosave_restore_when_empty: false,
        image_advtab: true,
        importcss_append: true,
        paste_data_images: true,
        templates: [
            {
                title: 'New Table',
                description: 'creates a new table',
                content: '<div class="mceTmpl"><table width="98%%"  border="0" cellspacing="0" cellpadding="0"><tr><th scope="col"> </th><th scope="col"> </th></tr><tr><td> </td><td> </td></tr></table></div>'
            },
            {title: 'Starting my story', description: 'A cure for writers block', content: 'Once upon a time...'},
            {
                title: 'New list with dates',
                description: 'New List with dates',
                content: '<div class="mceTmpl"><span class="cdate">cdate</span><br /><span class="mdate">mdate</span><h2>My List</h2><ul><li></li><li></li></ul></div>'
            }
        ],
        template_cdate_format: '[Date Created (CDATE): %m/%d/%Y : %H:%M:%S]',
        template_mdate_format: '[Date Modified (MDATE): %m/%d/%Y : %H:%M:%S]',
        image_caption: true,
        quickbars_selection_toolbar: 'bold italic | quicklink h2 h3 blockquote quickimage quicktable',
        noneditable_noneditable_class: "mceNonEditable",
        toolbar_drawer: 'sliding',
        spellchecker_dialog: true,
        spellchecker_whitelist: ['Ephox', 'Moxiecode'],
        tinycomments_mode: 'embedded',
        content_style: ".mymention{ color: green; }",
        contextmenu: "link image imagetools table configurepermanentpen",

        content_style: '.mce-annotation { background: #fff0b7; } .tc-active-annotation {background: #ffe168; color: black; }',
        images_upload_url: '/topic/uploadImage',
        images_upload_base_path: '',
        images_upload_credentials: true
    });

    function selectTopicColor() {
        $("#post-topic-color").trigger('click');
    }

    function setTopicColor() {
        var color = $("#post-topic-color").val();
        $("#post-form-layout input[name='subject']").css({
            color: color
        })
    }

    function pushTopic() {
        var activeEditor = tinymce.activeEditor;
        var editBody = activeEditor.getBody();
        activeEditor.selection.select(editBody);
        var content = activeEditor.selection.getContent();
        var subject = $("#post-form-layout input[name='subject']").val();
        if (subject == "") {
            alert("请输入『坦白说主题』");
            return;
        }
        var vo = {subject: subject, content: content, color: $("#post-topic-color").val()};
        showDialog('正在提交主题内容...');
        $.ajax({
            url: '/topic/add/guest_topic',
            type: "POST",
            async: true,
            dataType: "json",
            data: {vo: jSONStringify(vo)},
            success: function (res) {
                hideDialog();
                if (res.errorCode == 0) {
                    info('发表主题内容成功.');
                    $("#post-form-layout").hide();
                    $("#post-form-layout").remove();
                    backToHome();
                    pageno = 1;
                    loadTopicList('new');
                    $('body').css({
                        overflowY: 'auto'
                    });
                    tinymce.off('beforeunload');
                    tinymce.remove(".input_area");
                    location.href = "/index"
                } else {
                    error('发表主题内容失败');
                }
            },
            error: function (err) {
                hideDialog();
                error("发表主题内容失败：" + err);
            }
        });
    }

    function onBack() {
        tinymce.off('beforeunload');
        tinymce.remove(".input_area");
        $("#post-form-layout").hide();
        $("#post-form-layout").remove();
    }

    $(document).on('beforeunload', function () {
        return false;
    });

</script>